<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隐藏秘密</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="wrap">
        <input type="text" id="input">
        <svg viewBox="0 0 100 100" id="eye">
            <path stroke="#184098" fill="none" stroke-linecap="round" stroke-width="10" d="M10,50 Q50,10 90,50" class="eye-top"></path>
            <path stroke="#184098" fill="none" stroke-linecap="round" stroke-width="10" d="M10,50 Q50,90 90,50" class="eye-bottom"></path>
            <circle fill="none" stroke="#184098" stroke-linecap="round" stroke-width="10" cx="50" cy="50" r="15" class="eye-ball" transform="rotate(90 50 50)"></circle>
        </svg>
    </div>
    <script>
        const $ = dom=>document.querySelector(dom);
        const wrap = $('#wrap');
        const eye = $("#eye");
        const input = $('#input');
        
        eye.addEventListener("click",()=>{
            wrap.classList.toggle('hide');
            input.setAttribute(
                "type",
                input.getAttribute('type') === 'text' ? "password" : "text"
            );
        })
    </script>
</body>
</html>